<style>
    .input-group .form-control{
        color: #000 !important;
    }
    .we7-form .form-group, form .form-group{
        margin-bottom:0;
    }
</style>
<div style="margin-bottom:20px;">
    <button onclick="toggleModel()" type="button" class="btn btn-primary">添加菜单</button>
</div>
<div id="app">
    <div class="panel panel-default">
        <div class="panel-body table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>图片</th>
                        <th>文字</th>
                        <th>链接</th>
                        <th>删除</th>
                    </tr>
                </thead>
                <tbody>
                    {loop $config['menu'] $index $item}
                    <tr>
                        <td><img style="max-width:100px;" src="{php echo $_W['attachurl'].$item['imgurl']}"</td>
                        <td>{$item['text']}</td>
                        <td>{$item['url']}</td>
                        <td>
                            <div class="btn-toolbar" role="toolbar">
                                <div class="btn-group" role="group">
                                    <button type="button" data-id="{$index}" class="btn btn-danger btn-sm btn-delete">删除</button>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {/loop}
                </tbody>
            </table>
        </div>
    </div>
</div>
<div id="mymodel" class="modal fade in"  style="display: none;z-index:1;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title" >添加菜单</h4>
        </div>
        <div class="modal-body">
            <form>
                <div class="form-group">
                    <label for="recipient-name" class="control-label">文字</label>
                    <input type="text" name="text" class="form-control" id="recipient-name">
                </div>
                <div class="form-group">
                    <label for="recipient-name" class="control-label">链接</label>
                    <input type="text" name="url" class="form-control" id="recipient-name">
                </div>
                <div class="form-group">
                    <label for="recipient-name" class="control-label">图片</label>
                    {php echo tpl_form_field_image('imgurl', '', $default = '', $options = array());}
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" onclick="toggleModel()">取消</button>
            <button onclick="submit()" type="button" class="btn btn-primary">提交</button>
        </div>
        </div>
    </div>
</div>

<script>
    var http = axios.create({
        transformRequest: function (data) {
            return JSON.stringify(data);
        },
        transformResponse: function (data) {
            return JSON.parse(data);
        }
    })
</script>
<script>
    function toggleModel () {
        $('#mymodel').toggle();
    }
    function submit() {
        var arr  = $('form').serializeArray();
        var data = {};
        for(var i=0;i<arr.length;i++) {
            data[arr[i].name] = arr[i].value;
        }
        $.ajax({
            url:window.location.href+'&action=addmenu',
            type:'post',
            data:data
        }).then(function(res){
            toggleModel();
            location.reload();
        })
        /* http({
            url:
            method:'post',
            data:data
        }).then(function(res) {
            res = res.data;
            
        }) */
    }

    $('.btn-delete').on('click',function () {
        var id = $(this).attr('data-id');
        var cfm = weui.confirm('删除后无法恢复,确认删除吗?',function () {
            http({
                url:window.location.href+'&action=deletemenu',
                params: {
                    id:id
                }
            }).then(function(res){
                res = res.data;
                if(res.ret==1){
                    cfm.hide(function(){
                        weui.alert(res.message);
                    })
                }else{
                    location.reload();
                }
            });
            return false;
        })
    });
</script>